<!--
 * @FileDescription: 新增/修改 火炬弹窗
 * @Author: 祝小文
 * @Date: 2022-10-23 18:57
 -->
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { emitter } from '@/composables'
import Title from '@/components/title/index.vue'
import DialogPopUp from '@/components/DialogPopUp/index.vue'
import hj_icon from '@/assets/image/mapIcon/hj-icon.png'
import { checkNumberTypeAndLength } from '@/utils/common'
import { queryHjxxInfo, insertOrUpdateHjxx } from '@/service/api'

const chemicalStore = useChemicalStore()
const torchFacilities = chemicalStore.productionStorage.torchFacilities

const props = defineProps({
  cjInfo: {
    type: Object,
    default: () => {
      return {}
    },
  }, //采集信息,
})

//字典
const ywBool: any = chemicalStore.commonDictionaries.ywBool
const syzt: any = chemicalStore.commonDictionaries.syzt
const hjlx: any = torchFacilities.dictionaries.hjlx
const hjxs: any = torchFacilities.dictionaries.hjxs

//字段默认值
function fieldDefault() {
  if (props.cjInfo.lx === 'edit') {
    const selectField = ['syzt', 'hjlx', 'hjxs']
    for (const key in hjInfo.value) {
      if (selectField.includes(key) && hjInfo.value[key] === '0') {
        if (key === 'syzt') {
          hjInfo.value.syzt = syzt[0].zddm
        } else if (key === 'hjlx') {
          hjInfo.value.hjlx = hjlx[0].zddm
        } else if (key === 'hjxs') {
          hjInfo.value.hjxs = hjxs[0].zddm
        }
      }
    }
  } else {
    hjInfo.value.syzt = syzt[0].zddm
    hjInfo.value.hjlx = hjlx[0].zddm
    hjInfo.value.hjxs = hjxs[0].zddm

    const ywBool: any = ['ywfyg', 'ywhyjk']
    for (const key in hjInfo.value) {
      if (ywBool.includes(key)) {
        hjInfo.value[key] = '0'
      }
    }
  }
}

//获取企业id
const qyId = computed(() => {
  return chemicalStore.qyInfo.id
})

//火炬信息
const hjInfo = ref({
  hjmc: '',
  syzt: '',
  gd: '',
  hjlx: '',
  hjxs: '',
  ywfyg: '',
  ywhyjk: '',
  bz: '',
})
//必填字段
const requiredNameArr = ['hjmc', 'syzt', 'hjlx', 'hjxs', 'ywfyg', 'ywhyjk']

/** 渲染火炬 */
function loadTorchInfo(cjId: any) {
  queryHjxxInfo({ key: cjId }).then((res: any) => {
    delete res.id //过滤id
    delete res.cjsj //过滤创建时间
    delete res.gxsj //过滤更新时间

    hjInfo.value = res

    fieldDefault() //字段默认值
  })
}

/** 取消点击事件 */
const cancelClick = () => {
  chemicalStore.closeAllPSDialog() //关闭全部弹窗
  torchFacilities.addTorchShow = false
}

/** 重置点击事件 */
const resetClick = () => {
  hjInfo.value = {
    hjmc: '',
    syzt: '',
    gd: '',
    hjlx: '',
    hjxs: '',
    ywfyg: '',
    ywhyjk: '',
    bz: '',
  }

  //下拉框默认值
  hjInfo.value.syzt = syzt[0].zddm
  hjInfo.value.hjlx = hjlx[0].zddm
  hjInfo.value.hjxs = hjxs[0].zddm

  const ywBool: any = ['ywfyg', 'ywhyjk']
  for (const key in hjInfo.value) {
    if (ywBool.includes(key)) {
      hjInfo.value[key] = '0'
    }
  }
}

/** 保存点击事件 */
const saveClick = () => {
  /** 校验数据非空 Start */
  // let flag = false
  // for (const key in hjInfo.value) {
  //   if (requiredNameArr.includes(key) && !hjInfo.value[key]) {
  //     console.log(key, '字段未填写')
  //     flag = true
  //   }
  // }
  // if (flag) {
  //   return (chemicalStore.FormCheckConfirmShow = true)
  // }
  /** 校验数据非空 End */

  /** 校验数据类型和长度 Start */
  if (!checkNumberTypeAndLength(hjInfo.value.gd, '火炬高度', 6)) {
    return
  }
  /** 校验数据类型和长度 End */

  torchFacilities.addTorchShow = false

  const params: any = {
    ...hjInfo.value,
    qyid: qyId.value,
    hjqid: props.cjInfo.fid,
    sfyx: 1,
  }

  //如果是修改需要传cjid
  if (props.cjInfo.lx === 'edit') {
    params.id = props.cjInfo.cjId
  }

  insertOrUpdateHjxx(params)
    .then((res: any) => {
      //添加
      if (props.cjInfo.lx === 'add') {
        ElMessage.success('新增火炬成功')
      }
      //修改
      else if (props.cjInfo.lx === 'edit') {
        ElMessage.success('修改火炬成功')
        //需要修改地图要素的标注名称
        //如果已经标注过，需要修改dom
        window.GOverlayArray.forEach((item: any) => {
          if (item.name === props.cjInfo.cjId) {
            const el = document.createElement('div')
            el.className = 'maplabelpopup-one'
            // 标牌禁止右击
            el.setAttribute('oncontextmenu', 'return false')
            const img = document.createElement('img')
            img.src = hj_icon
            const div = document.createElement('div')
            div.innerText = hjInfo.value.hjmc
            el.appendChild(img)
            el.appendChild(div)

            item.overlay.updateDom(el)
          }
        })
      }
      //刷新数据
      emitter.emit('hj_refreshData')
    })
    .catch((err: any) => {
      if (props.cjInfo.lx === 'add') {
        ElMessage.error('新增火炬失败')
      } else if (props.cjInfo.lx === 'edit') {
        ElMessage.error('修改火炬失败')
      }
    })
}

/** 如果是修改，需要重新渲染数据 */
watch(
  () => props.cjInfo.cjId,
  (newValue, oldValue) => {
    if (props.cjInfo.lx === 'edit') {
      loadTorchInfo(props.cjInfo.cjId)
    } else {
      resetClick() //重置表单

      fieldDefault() //字段默认值
    }
  },
  {
    immediate: true,
    deep: true,
  }
)
</script>

<template>
  <DialogPopUp
    title="火炬信息"
    @cancel-click="cancelClick"
    @reset-click="resetClick"
    @save-click="saveClick"
  >
    <!-- 火炬设施基本信息 -->
    <div>
      <Title title-info="基本信息" />
      <el-form label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="火炬名称">
              <el-input v-model.trim="hjInfo.hjmc" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="使用状态">
              <el-select v-model.trim="hjInfo.syzt" placeholder="请选择">
                <el-option
                  v-for="item in syzt"
                  :key="item.zddm"
                  :label="item.zdmc"
                  :value="item.zddm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="火炬高度">
              <el-input v-model.trim="hjInfo.gd">
                <template #suffix>
                  <i>m</i>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="火炬类型">
              <el-select v-model.trim="hjInfo.hjlx" placeholder="请选择">
                <el-option
                  v-for="item in hjlx"
                  :key="item.zddm"
                  :label="item.zdmc"
                  :value="item.zddm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="火炬形式">
              <el-select v-model.trim="hjInfo.hjxs" placeholder="请选择">
                <el-option
                  v-for="item in hjxs"
                  :key="item.zddm"
                  :label="item.zdmc"
                  :value="item.zddm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="有无分液罐">
              <el-select v-model.trim="hjInfo.ywfyg" placeholder="请选择">
                <el-option
                  v-for="item in ywBool"
                  :key="item.zddm"
                  :label="item.zdmc"
                  :value="item.zddm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="有无火焰监控">
              <el-select v-model.trim="hjInfo.ywhyjk" placeholder="请选择">
                <el-option
                  v-for="item in ywBool"
                  :key="item.zddm"
                  :label="item.zdmc"
                  :value="item.zddm"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model.trim="hjInfo.bz" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </DialogPopUp>
</template>

<style lang="less" scoped></style>
